---
title: CSS classes
hide_table_of_contents: true
description: Visual guide to CSS classes for each component element
---

The `<QueryBuilder />` component assigns [standard classes](../utils/misc#defaults) to each element. In the (fully operational) query builder below, the `title` and `label` for each element have been set to the element's standard class.

The following standard classnames are not labeled below. For most of them, the elements they apply to can be identified by outline color.

- `.queryBuilder` (<code style={{ fontWeight: 'bold', color:'black', backgroundColor: 'white', fontFamily: 'unset', borderColor: 'white' }}>black</code> outline; the outer-most `<div>`)
- `.ruleGroup` (<span style={{ fontWeight: 'bold', color:'maroon' }}>maroon</span> outline)
- `.ruleGroup-header` (<span style={{ fontWeight: 'bold', color:'rebeccapurple' }}>purple</span> outline)
- `.ruleGroup-body` (<span style={{ fontWeight: 'bold', color:'blue' }}>blue</span> outline)
- `.rule.queryBuilder-disabled` (<span style={{ fontWeight: 'bold', color:'gray' }}>gray</span> outline for locked/disabled rules)
- `.rule.queryBuilder-valid` (<span style={{ fontWeight: 'bold', color:'green' }}>green</span> outline for valid rules)
- `.rule.queryBuilder-invalid` (<span style={{ fontWeight: 'bold', color:'red' }}>red</span> outline for invalid rules)
- `.shiftActions` (<span style={{ fontWeight: 'bold', color:'#ff7e16' }}>orange</span> outline for the wrapper `<div>` around the "Shift up"/"Shift down" buttons)
- `.rule-hasSubQuery` (applied to rules that render a subquery)
- `.queryBuilder-loading` (applied to rules/groups while an [async promise is pending](../tips/async-option-lists))
- `.dndDragging` (applied to "preview" element while dragging)
- `.dndOver` (applied to "hovered over" element while dragging)
- `.dndCopy` (applied to "hovered over" element while dragging and the ["copy" modifier key is pressed](../dnd#cloning-and-grouping))
- `.dndGroup` (applied to "hovered over" element while dragging and the ["group" modifier key is pressed](../dnd#cloning-and-grouping))

A full list of standard classnames is [below](#standard-classnames).

:::tip

Disable application of all standard classnames with the [`suppressStandardClassnames`](../components/querybuilder#suppressstandardclassnames) prop.

:::

import { QueryBuilderDnD } from '@react-querybuilder/dnd';
import { QueryBuilderEmbed } from '@site/src/components/QueryBuilderEmbed';
import { standardClassnames as sc } from 'react-querybuilder';

export const fields = [
  {
    name: 'f1',
    label: `.${sc.fields}`,
    defaultValue: 'This rule is valid',
    validator: () => true,
  },
  {
    name: 'f2',
    label: `.${sc.fields}`,
    defaultValue: 'This rule is invalid',
    validator: () => false,
  },
  {
    name: 'f3',
    label: `.${sc.valueSource}`,
    valueSources: ['value', 'field'],
  },
  {
    name: 'fb1',
    label: `Value list`,
    operators: [{ name: 'between', label: 'between' }],
    valueSources: ['field', 'value'],
    comparator: f => f.name === 'fb2',
  },
  {
    name: 'fb2',
    label: `.${sc.valueListItem}`,
  },
];

export const combinators = [{ name: 'and', label: `.${sc.combinators}` }];

export const getOperators = () => [{ name: '=', label: `.${sc.operators}` }];

export const controlClassnames = {
  queryBuilder: 'rqb-structure',
};

export const translations = {
  fields: {
    title: `.${sc.fields}`,
  },
  operators: {
    title: `.${sc.operators}`,
  },
  value: {
    title: `.${sc.value}`,
  },
  removeRule: {
    label: `.${sc.removeRule}`,
    title: `.${sc.removeRule}`,
  },
  removeGroup: {
    label: `.${sc.removeGroup}`,
    title: `.${sc.removeGroup}`,
  },
  addRule: {
    label: `.${sc.addRule}`,
    title: `.${sc.addRule}`,
  },
  addGroup: {
    label: `.${sc.addGroup}`,
    title: `.${sc.addGroup}`,
  },
  combinators: {
    title: `.${sc.combinators}`,
  },
  notToggle: {
    label: `.${sc.notToggle}`,
    title: `.${sc.notToggle}`,
  },
  cloneRule: {
    label: `.${sc.cloneRule}`,
    title: `.${sc.cloneRule}`,
  },
  cloneRuleGroup: {
    label: `.${sc.cloneGroup}`,
    title: `.${sc.cloneGroup}`,
  },
  dragHandle: {
    label: `.${sc.dragHandle}`,
    title: `.${sc.dragHandle}`,
  },
  lockRule: {
    label: `.${sc.lockRule}`,
    title: `.${sc.lockRule}`,
  },
  lockGroup: {
    label: `.${sc.lockGroup}`,
    title: `.${sc.lockGroup}`,
  },
  lockRuleDisabled: {
    label: `.${sc.lockRule}`,
    title: `.${sc.lockRule}`,
  },
  lockGroupDisabled: {
    label: `.${sc.lockGroup}`,
    title: `.${sc.lockGroup}`,
  },
  // shiftActionUp: { label: `.${sc.shiftActions}` },
  // shiftActionDown: { label: `.${sc.shiftActions}` },
  valueSourceSelector: {
    title: `.${sc.valueSource}`,
  },
};

export const defaultQuery = {
  combinator: 'and',
  rules: [
    { field: 'f1', operator: '=', value: `.${sc.value}` },
    {
      combinator: 'and',
      rules: [
        { field: 'f1', operator: '=', value: 'This rule is valid' },
        { field: 'f2', operator: '=', value: 'This rule is invalid' },
        {
          disabled: true,
          combinator: 'and',
          rules: [
            {
              field: 'f1',
              operator: '=',
              value: `This rule's group is disabled, therefore this rule is also disabled`,
            },
          ],
        },
      ],
    },
    { field: 'f3', operator: '=', value: 'f1' },
    { field: 'fb1', operator: 'between', value: 'fb2,fb2', valueSource: 'field' },
  ],
};

<div className="rqb-structure-wrapper">
  <QueryBuilderDnD>
    <QueryBuilderEmbed
      showNotToggle
      showCloneButtons
      showLockButtons
      showShiftActions
      enableDragAndDrop
      fields={fields}
      combinators={combinators}
      getOperators={getOperators}
      controlClassnames={controlClassnames}
      translations={translations}
      defaultQuery={defaultQuery}
    />
  </QueryBuilderDnD>
</div>

## Standard classnames

%importcode /packages/core/src/defaults.ts#region=docs-standardclassnames
